<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>观摩城市 - 海口市</title>
    <link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
    <style>
        #map-container {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="map-container"></div>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak={{ request.args.get('ak', '47jXQbiwPNWVY5GgVPUJYpOiHG5YhBcr') }}"></script>
    <script type="text/javascript">
        if (document.getElementById('map-container')) {
            fetch('/static/custom_map_config.json')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Failed to load custom map style');
                    }
                    return response.json();
                })
                .then(customStyle => {
                    var map = new BMap.Map("map-container");
                    var point = new BMap.Point(110.330802, 20.022071); // 海口市坐标
                    map.centerAndZoom(point, 12);
                    map.enableScrollWheelZoom(true);
                    map.setMapType(BMAP_EARTH_MAP); // 3D城市地图

                    map.setMapStyle({styleJson: customStyle});

                    // 修改关键帧定义
                    var keyFrames = [
                        {
                            center: new BMap.Point(110.3434, 20.0456),
                            zoom: 15,
                            tilt: 60,
                            heading: 0,
                            percentage: 0
                        },
                        {
                            center: new BMap.Point(110.3543, 20.0278),
                            zoom: 15,
                            tilt: 60,
                            heading: 90,
                            percentage: 0.33
                        },
                        {
                            center: new BMap.Point(110.3312, 20.0271),
                            zoom: 15,
                            tilt: 60,
                            heading: 180,
                            percentage: 0.66
                        },
                        {
                            center: new BMap.Point(110.3245, 20.0489),
                            zoom: 15,
                            tilt: 60,
                            heading: 270,
                            percentage: 1
                        }
                    ];

                    // 修改动画属性
                    var opts = {
                        duration: 10000,     // 动画持续时间
                        delay: 1000,         // 动画延迟开始时间
                        interation: 1        // 动画迭代次数
                    };

                    var animation = new BMap.ViewAnimation(keyFrames, opts);

                    animation.addEventListener('animationstart', function(e) {
                        console.log('Animation started');
                    });
                    animation.addEventListener('animationiterations', function(e) {
                        console.log('Animation iteration');
                    });
                    animation.addEventListener('animationend', function(e) {
                        console.log('Animation ended');
                    });
                    animation.addEventListener('animationcancel', function(e) {
                        console.log('Animation canceled');
                    });

                    map.startViewAnimation(animation);
                })
                .catch(error => {
                    console.error('Error loading custom map style:', error);
                    var map = new BMap.Map("map-container");
                    var point = new BMap.Point(110.330802, 20.022071); // 海口市坐标
                    map.centerAndZoom(point, 12);
                    map.enableScrollWheelZoom(true);
                    map.setMapType(BMAP_EARTH_MAP); // 3D城市地图
                });
        } else {
            console.error('Map container not found');
        }
    </script>
</body>
</html>